<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!-- 获取 Cesium 资源 -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/cesium/1.99.0/Cesium.min.js"></script> -->
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <!-- <link href="https://cdn.bootcdn.net/ajax/libs/cesium/1.99.0/Widgets/widgets.min.css" rel="stylesheet"> -->
  <link href="./index.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
</head>

<body>
  <!-- Cesium 容器 -->
  <div id="cesiumContainer">
    <div onclick="toggle()" class="toggle">
      二三维切换
    </div>
    <ul class="map">
      <li onclick="map1()">矢量地图</li>
      <li onclick="map2()">高德影像</li>
      <li onclick="map3()">地理要素</li>
    </ul>
    <ul class="draw">
      <li onclick="draw()">绘画</li>
      <li onclick="clearAll()">清除</li>
    </ul>
    <ul class="button">
      <li onclick="flytoChengdu()">成都</li>
      <li onclick="flytoSichuan()">四川</li>
    </ul>
    <div class="home" onclick="flytoHome()">HOME</div>
    <div class="info">
      <p>经度：<span class="lng">--</span></p>
      <p>纬度：<span class="lat">--</span></p>
    </div>
    <div class="clearPath" onclick="clearPath()">清除全部航迹</div>
    <video id="video" src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.webm" autoplay=""
      loop="" crossorigin="" controls=""></video>
  </div>

  <script type="text/javascript">
    // 设置 token
    const token =
      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMzg0ZDExOS05Y2Q1LTRkODEtYjQ4My0wOTliOWM2MjVlZWUiLCJpZCI6MTA3NTQ4LCJpYXQiOjE2NjI3MDY3MjN9.9TNP43cCHqnaHvmhMRC_8yEz6OxR_YoFIErc09fZuLw';
    Cesium.Ion.defaultAccessToken = token;

    // 创建一个 Cesium
    const viewer = new Cesium.Viewer('cesiumContainer', {
      geocoder: false, // 是否创建右上角的查询按钮（右上第一个）
      homeButton: false, // 是否创建 home 按钮（右上第二个）
      sceneModePicker: false, // 是否创建右上角的切换地图的按钮（右上第三个）
      baseLayerPicker: false, // 是否创建右上角 BaseLayerPicker 小部件（右上第四个）
      navigationHelpButton: false, // 是否创建右上角的导航帮助按钮（右上第五个
      // vrButton: true, // 是否创建右下角的 VR 按钮，默认值为 true
      animation: false, // 是否创建左下角的动画小部件
      fullscreenButton: false, // 是否创建右下角全屏按钮
      timeline: false, // 是否创建最下方的时间线
      infoBox: false, // 点击实体是否展示详情
      selectionIndicator: false, // 点击实体是否显示选中样式
      // 左下方的 Cesium logo 使用 css 删除
      terrainProvider: Cesium.createWorldTerrain(), // 加载地球椭球体
      shadows: true, // 阴影是否被太阳照射
    });
    // 启用地球照明
    viewer.scene.globe.enableLighting = true;
  </script>
  <!-- 基本方法 -->
  <script src="./js/init.js"></script>
  <!-- 绘制面 -->
  <script src="./js/drawPolygon.js"></script>
  <!-- 事件 -->
  <script src="./js/event.js"></script>
  <!-- 监听鼠标移动 -->
  <script src="./js/move.js"></script>
  <!-- 工具栏 -->
  <script src="./js/toggle.js"></script>
  <!-- 地图库 -->
  <script src="./js/map.js"></script>
  <!-- 引入 kml 文件 -->
  <!-- <script src="./js/addEntity.js"></script> -->
  <!-- 移动实体 -->
  <script src="./js/getEntity.js"></script>
  <!-- 无人机飞行 -->
  <!-- <script src="./js/uavFly.js"></script> -->
  <!-- 添加图层/图片/视频 -->
  <script src="./js/addMaterial.js"></script>
  <!-- 添加 html -->
  <script src="./js/addHtml.js"></script>
  <!-- 添加盘旋圆 -->
  <script src="./js/addCircle.js"></script>
  <!-- 添加图元 -->
  <script src="./js/addGeometry.js"></script>
  </div>
</body>

</html>